<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
    <div class="contents">
        <div class="contetn_left">
            <div class="pagetab">
                <!-- <div class="item">实时监测</div> -->
            </div>
            <ItemWrap11 class="contetn_left-top contetn_lr-item" title="工业废气排放智能监控系统">
                <el-button type="text" @click="open1">工业废气排放智能监控系统</el-button>
            </ItemWrap11>
            <ItemWrap11 class="contetn_left-center contetn_lr-item" title="电竞画面质量评估系统">
                <el-button type="text" @click="open2">电竞画面质量评估系统</el-button>
            </ItemWrap11>
            <ItemWrap11 class="contetn_left-center contetn_lr-item" title="电竞影像复原增强系统">
                <el-button type="text" @click="open3">电竞影像复原增强系统</el-button>
            </ItemWrap11>
        </div>
        <div class="contetn_center">
            <ItemWrap11 class="contetn_left-center contetn_lr-item" title="建材工业粉尘颗粒物监控系统">
                <el-button type="text" @click="open4">建材工业粉尘颗粒物监控系统</el-button>
            </ItemWrap11>
            <ItemWrap11 class="contetn_center-center contetn_lr-item" title="基于遥感的水质浊度检测模块">
                <el-button type="text" @click="open5">基于遥感的水质浊度检测模块</el-button>
            </ItemWrap11>
        </div>
    </div>
</template>

<script>

export default {
    components: {
    },
    data() {
        return {};
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() { },

    mounted() { },
    methods: {
        open1() {
           this.$router.push('/gongyefeiqi')
        },
        open2() {
            this.$router.push('/dianjinghuamian')
        },
        open3() {
            this.$router.push('/dianjingyingxiang')
        },
        open4() {
            this.$router.push('/jiancai')
        },
        open5() {
            this.$router.push('/yaogan')
        }
    },
};
</script>
<style lang="scss" scoped>
// 内容
.contents {

    .contetn_left,
    .contetn_right {
        width: 540px;
        box-sizing: border-box;
        // padding: 16px 0;
    }

    .contetn_center {
        width: 540px;
    }

    //左右两侧 三个块
    .contetn_lr-item {
        height: 310px;
        text-align: center;
        line-height: 155px;
    }

    .contetn_center_top {
        width: 100%;
    }

    // 中间
    .contetn_center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .contetn_center-bottom {
        height: 315px;
    }

    //左边 右边 结构一样
    .contetn_left,
    .contetn_right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
    }
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
